<template>
	<view class="plate-box">

		<view class="province">
			<uv-text text="全国"></uv-text>
		</view>
		<view>
			<uv-grid :col="4">
				<uv-grid-item  @click="tosearch('全国')">
					<view class="city-box">
						<text class="citys-item">全国</text>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view v-for="p in province" :key="p.id">
			<view class="province">
				<uv-text :text="p.name"></uv-text>
			</view>
			<view>
				<uv-grid :col="4">
					<uv-grid-item v-for="c in city[p.id]" :key="c.id">
						<view class="city-box" @click="tosearch(c.name)">
							<text class="citys-item">{{c.name}}</text>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>

		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
			urlparm:{}
			}
		},
		computed: {
			...mapState({
				province: state => state.area.province,
				city: state => state.area.city,

			})
		},
		methods: {
			tosearch(name) {
				this.urlparm.city=name
				var _p=''
				for(key in this.urlparm){
					_p=_p? _p+'&':_p
					_p+=`${key}=${this.urlparm[key]}`
				}
				uni.navigateTo({
					url: '/pages/search/search?' + p
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.plate-box {
		background-color: #fff;
		padding: 15rpx;
	}

	.province {
		padding: 15rpx;
	}

	.city-box {
		width: 90%;
		margin: 5upx auto;
		background-color: #f5f5f5;
		border: 1upx #ebebeb solid;
		text-align: center;
		padding:10upx 0;
		border-radius: 6upx;
	}

	.citys-item {}
</style>